<template>
	<!-- 
	 <view class="content" style="background-color:hsl(184.90463215258856, 100%, 50%) ;">-->
	<view class="content" >
		<view class="color-picker">
		 <!-- <view class="color-name">{{hueView.colorName}}</view> -->
		  <!--  <view class="show-view" :style="{ background:hueView.colorName }" ></view>
				<view class="show-view" :style="{ backgroundColor: 'hsl(' + hueView.H + ', 100%, 50%)' }" ></view> -->
					
					 <view class="hue-view"  @touchstart="pickHue" @touchmove="pickHue">
					<text class="anchor"   :style="{ left: hueView.anchorLeft + 'px',top: hueView.anchorTop + 'px' }"></text>
					</view>
					
					<view class="color-view"  @touchstart="pickColor" @touchmove="pickColor" :style="{ backgroundColor: 'hsl(' + hueView.H + ', 100%, 50%)' }">
					<text class="anchor" :style="{ top: 4 + 'px', left: colorView.anchorLeft + 'px' }"></text>
					  </view>
						<!-- 		<button @click="fa" :style="{background:hueView.colorName}" style="margin-top: 20px;">按钮</button> -->
		
		
			<!-- 	<text >{{info.msg}}</text>
				<text >{{val.colorName}}</text>
				<text >{{val.hueLeft}}</text>
				<text >{{val.anchorTop}}</text>
				<text >{{val.anchorLeft}}</text> -->
				

			    <!-- <button type="default" class="default">11111111111111</button> -->
		</view>
	</view>
</template>

<script >
	import { reactive, toRefs, ref, onMounted,defineEmits } from "vue";
	export default {
		setup(props,context) {
			let val =reactive({
				    colorName: '',
						hueLeft: 0.5, // 色相选择器初始位置 [0, 1]
						anchorTop: 0.5, // 颜色选择器初始 top [0, 1]
						anchorLeft: 0.5, // 颜色选择器初始 left [0, 1]
			})
			let info =reactive({
				
				r:'',
				g:'',
				b:''
			})
	
			let hueView = reactive({
				  colorName: '',
					hueLeft: 0.5, // 色相选择器初始位置 [0, 1]
					anchorTop: 0.5, // 颜色选择器初始 top [0, 1]
					anchorLeft: 0.5, // 颜色选择器初始 left [0, 1]
					// data:[], 
					H:0,
					width:'',
					height:'',
					left:'',
					right:'',
					T:''
			})
			let colorView = reactive({
				  anchorTop: 0.5, // 颜色选择器初始 top [0, 1]
				  anchorLeft: 0.5, // 颜色选择器初始 left [0, 1]
					S:'',
					L:'',
					top:'',
					left:'',
					height:'',
					width:''
			})
			// const {  colorName, hueLeft, anchorTop, anchorLeft } = toRefs(data);
	    
		function fa(){
			info.msg++;
			val.colorName = "#336633"
			console.log(hueView,colorView)
	
		   hueView.colorName = val.colorName
			 console.log(hueView.colorName)
			console.log(hueView.anchorTop)
			console.log(hueView.anchorLeft)
			// hueView.anchorTop = 100
			// hueView.anchorLeft = 100
			console.log(hueView.anchorTop)
			console.log(hueView.anchorLeft)
			
			
			
		}
		function pickHue(e){
			
			     console.log( 'hsl(' + hueView.H + ', 100%, 50%)') //只有颜色，不更改色差和透明度
				   console.log(hueView.left,e.touches[0].pageX,hueView.right)
			       if (e.touches[0].pageX >= hueView.left && e.touches[0].pageX <= hueView.right) {
			        hueView.anchorLeft = e.touches[0].pageX - hueView.left  //圆盘里圆心向左滚动的距离
			         hueView.anchorTop = e.touches[0].pageY - hueView.top   //圆盘里圆心上下滚动的距离
							 if(hueView.anchorTop < 0){  //这个判断是预防圆心超出圆盘区域
								 hueView.anchorTop = 0
							 }else if(hueView.anchorTop > hueView.height){
								 hueView.anchorTop = hueView.height
							 }else{
								  hueView.anchorTop = e.touches[0].pageY - hueView.top 
							 }
			         hueView.H = hueView.anchorLeft / hueView.width * 360
			         hueView.T = hueView.anchorTop / hueView.height * 360
			        hueView.colorName = getColorString() // 根据 HLS 计算 RGB 字符串
			        console.log(hueView.colorName)
							
			       }
					
						
		}
	  function pickColor(e){
			  const top = e.touches[0].pageY - colorView.top    //方块里圆心上下滚动的距离
			  const left = e.touches[0].pageX - colorView.left   //方块里圆心向左滚动的距离
				console.log(top,left)
				//top和left判断可以让圆心不超出长方形外面
				   // if (top < 0) {
				   //     colorView.anchorTop = 0
				   //  } else if (top > colorView.height) {
				   //    colorView.anchorTop = colorView.height
				   //  } else {
				   //    colorView.anchorTop = e.touches[0].pageY - colorView.top
				   // }
					if (left < 0) {
						   colorView.anchorLeft = 0
						  } else if (left > colorView.width) {
						   colorView.anchorLeft = colorView.width
						  } else {
						  colorView.anchorLeft = e.touches[0].pageX - colorView.left
						 }
				  colorView.S = colorView.anchorLeft / colorView.width
				  colorView.L =  floor((1 - colorView.S * 0.5) -colorView.anchorTop / colorView.height / (colorView.S + 1))
				  hueView.colorName = getColorString() // 根据 HLS 计算 RGB 字符串
					console.log(hueView.colorName)
					
		}
		 function floor(num) {
		   return num < 0.09 ? 0 : num
		  }
		function getHueViewOffset(){
			console.log("获取色相选择区域尺寸")
			uni.createSelectorQuery().select('.hue-view').boundingClientRect(data => {
				   console.log(data)
					console.log(data.height,data.width,data.left,data.right)
				   hueView.height = data.height
					  hueView.width = data.width
					 hueView.left = data.left
					  hueView.right = data.right
						hueView.top = data.top
						console.log( hueView.height, hueView.left, hueView.right,data.top)
			      hueView.anchorLeft = data.width * hueView.hueLeft
						console.log(hueView.anchorLeft)
						console.log(hueView.H)
						hueView.H = hueView.hueLeft * 360
						console.log(hueView.H)
			      }).exec();
						console.log(hueView)
		// 			console.log(hueView.anchorLeft,hueView.width,hueView.anchorLeft/hueView.width,"44444444444444444444444")
		}
		function getColorViewOffset(){
			//获取颜色选择区域尺寸
			uni.createSelectorQuery().select('.color-view').boundingClientRect(data => {
				   console.log(data)
					 colorView.top = data.top
					 colorView.left = data.left
					 colorView.height = data.height
					 colorView.width = data.width
					  console.log(colorView.top)
						 console.log(colorView.left)
					 colorView.anchorTop =  data.height *  colorView.anchorTop
				   colorView.anchorLeft = data.width *  colorView.anchorLeft
					 console.log( colorView.anchorTop,colorView.anchorLeft)
					 colorView.S = colorView.anchorLeft
					 // colorView.L = (1 - colorView.anchorLeft * 0.5) - colorView.anchorTop / (colorView.anchorLeft + 1)
					  colorView.L =  colorView.anchorTop
					 console.log(colorView.S,colorView.L)
			      }).exec();
			
		}
		function getColorString(){
		console.log(hueView.anchorLeft/hueView.width)
		const arr = hslToRgb(hueView.anchorLeft / hueView.width,colorView.S,colorView.L)
		const r = arr[0].toString(16).length === 1 ? `0${arr[0].toString(16)}` : arr[0].toString(16)
		const g = arr[1].toString(16).length === 1 ? `0${arr[1].toString(16)}` : arr[1].toString(16)
		const b = arr[2].toString(16).length === 1 ? `0${arr[2].toString(16)}` : arr[2].toString(16)
		info= {r,g,b}
	context.emit('sendInfo',info)
	
		console.log(r, g, b)
		return `#${r.toUpperCase()}${g.toUpperCase()}${b.toUpperCase()}`
		}
		function hslToRgb(h, s, l) {  // HSL 转 RGB 方法
		  var r, g, b;
		  if (s == 0) {
		    r = g = b = l; // achromatic
		  } else {
		    var hue2rgb = function hue2rgb(p, q, t) {
		      if (t < 0) t += 1;
		      if (t > 1) t -= 1;
		      if (t < 1 / 6) return p + (q - p) * 6 * t;
		      if (t < 1 / 2) return q;
		      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
		      return p;
		    }
		    var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
		    var p = 2 * l - q;
		    r = hue2rgb(p, q, h + 1 / 3);
		    g = hue2rgb(p, q, h);
		    b = hue2rgb(p, q, h - 1 / 3);
		  }
			console.log(Math.round(r * 255), Math.round(g * 255), Math.round(b * 255))
			info.r = Math.round(r * 255)
			info.g = Math.round(g * 255)
			info.b = Math.round(b * 255)
			console.log(info.r,info.g,info.b)
				
				
		  return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
		}
		
		 onMounted(async()=>{
		   console.log("222222222222222222222222222")
			  console.log(hueView.anchorLeft,hueView.width,hueView.anchorLeft/hueView.width,"888888888888888888888")
			 Promise.all([getHueViewOffset() , getColorViewOffset()]).then(() => {
			
				hueView.colorName = getColorString()
				
			 })
			
		      })
			return{
			  info,
			  val,
			  hueView,
			  colorView,
				fa,
				pickHue,
				pickColor,
				getHueViewOffset,
				getColorViewOffset,
				getColorString,
				hslToRgb,
				floor
			};
		}
		
	
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
	
		.color-picker {
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			.color-name {
				margin: 23rpx;
				font-size: 45rpx;
				font-weight: bold;
				letter-spacing: 8rpx;
			}
			.show-view {
				height: 56rpx;
				width: 367rpx;
			}
			.hue-view {
				width: 356rpx;
				height: 356rpx;
				margin: 12rpx 0;
				position: relative;
				border-radius: 50%;
				background: linear-gradient(90deg, #f00, #ff0, #0f0 , #0ff, #00f, #f0f, #f00);
					// z-index: -1;
		
				.anchor {
					width: 25rpx;
					height: 25rpx;
					border-radius: 50%;
					position: absolute;
					background: #000;
				 left: 50%;
				 top: 50%;
				 transform: translate(-50%,-50%);
					box-shadow: 0 0 2rpx rgba(0, 0, 0, 0.6);
				}
			}
			.color-view {
				// display:none;
				width: 567rpx;
				height:20rpx;
				position: relative;
					// z-index: -1;
				&::before,
				&::after {
					content: '';
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					position: absolute;
				}
				&::before {
					background: linear-gradient(to right, white, transparent);
				}
				// &::after {
				// 	background: linear-gradient(to top, black, transparent);
				// }
				.anchor {
					// z-index: 1;
					width: 24rpx;
					height: 24rpx;
					border-radius: 50%;
					position: absolute;
					border: 4rpx solid #FFFFFF;
					background: red;
					transform: translate(-50%, -50%);
				}
			}
		}
	}
 //  .default{
	// 	background-color: rgb( 26 31 154);
	// }
</style>
